<template>
  <div>
    <el-dialog title="积分调整" width="35%" :visible.sync="dialogFormVisible" @close="closeDiaLog">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          label-position="right"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="80px"
        >
          <el-form-item label="调整类型" prop="transactionType">
            <el-radio-group v-model="formData.transactionType" size="medium">
              <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value">{{
                item.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="lable" prop="amount">
            <el-input
              style="width: 100%"
              v-model.number="formData.amount"
              :maxlength="6"
              :placeholder="placeholder"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model.trim="formData.remark"
              :maxlength="50"
              placeholder="请输入备注（50字以内）"
              clearable
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 5 }"
            >
            </el-input>
            <span>温馨提示：充值后积分将在原有的基础上进行增加</span>
          </el-form-item>
        </el-form>
      </el-row>

      <div slot="footer" class="flex justify-center">
        <el-button size="medium" @click="cancel">取消</el-button>
        <el-button size="medium" type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: '',
  components: {},
  props: {
    // 是否显示
    value: {
      type: Boolean,
      default: false,
      require: true
    },

    // 充值用户id
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      formData: {
        // 交易类型，收入=增加，减少=支出 [0: 收入, 1: 支出]
        transactionType: 0,
        // 充值积分
        amount: '',
        // 备注
        remark: ''
      },
      rules: {
        amount: [
          {
            required: true,
            message: '请输入充值积分',
            trigger: 'blur'
          },
          { type: 'number', message: '请输入数字值', trigger: ['blur', 'change'] },
          {
            validator: (rule, value, callback) => {
              if (!(value >= 1 && value <= 100000)) {
                callback(new Error('请输入1-100000之前的数值'))
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      typeOptions: [
        {
          label: '增加',
          value: 0
        },
        {
          label: '减少',
          value: 1
        }
      ]
    }
  },
  computed: {
    // 是否显示弹出框
    dialogFormVisible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },

    lable() {
      return this.formData.transactionType ? '减少积分' : '充值积分'
    },
    placeholder() {
      return this.formData.transactionType ? '请输入减少积分' : '请输入充值积分'
    }
  },
  methods: {
    // 对话框关闭
    closeDiaLog() {
      this.dialogFormVisible = false
      // 充值表单
      this.$refs.elForm.resetFields()
    },

    // 点击取消
    cancel() {
      this.dialogFormVisible = false
      for (let key in this.formData) {
        if (key === 'type') {
          this.formData[key] = 0
        } else {
          this.formData[key] = ''
        }
      }
    },

    // 点击提交
    submitForm: _.debounce(function () {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // 发送请求
        this.$http.finance.userFinance
          .walletOperate({ ...this.formData, userId: this.id })
          .then(res => {
            if (res.status === 200) {
              this.$message.success('操作成功')
              this.$emit('refresh')
              this.cancel()
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log('submitForm', err)
          })
      })
    }, 400)
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
